* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

ul {
  list-style: none;
}
#box {
  width: 1200px;
  height: 600px;
  background: #fff url(../images/advise.webp) center / cover no-repeat;
  border-radius: 5px;
}

#box > [class*=icon] {
	width: 41px;
	height: 69px;
	position: absolute;
	top: 50%;
	transform: translate(0,-50%);
  /* 1、此元素应该在垂直方向上是居中的 */


  width: 41px;
  height: 69px;
  line-height: 69px;
  /* 2、移入此元素时，鼠标应当为小手形状 */
cursor: pointer;

}

#box > .left-icon {
  /* 3、此盒子应该距离左边10个像素 */
  background: url(../images/icon-slides.png) 82px center;
  left: 10px;
}

#box > .right-icon {

  /* 4、此盒子应该距离右边10个像素 */
  background: url(../images/icon-slides.png) 41px center;
  right: 10px;
}

#box > .left-icon:hover {
  background-position: 0;
}

#box > .right-icon:hover {
  background-position: -42px center;
}

#box > .circle {
  padding: 10px;
  position: absolute;
  bottom: 20px; 
  left: 50%;
  transform: translateX(-50%);
}

#box > .circle li {
  float: left;
  width: 10px;
  height: 10px;
  border-radius:50%;
  /* 5、此元素应该为一个圆 */
  border: 2px solid hsla(0,0%,100%,.3);
  background-color: rgb(0 0 0 / .4);
  margin: 0 4px;
}

#box > .circle li.active {
  background: hsla(0,0%,100%,.4);
  border-color: rgb(0 0 0 / .4);
}
.clearfix::after {
  content: '';
  display: block;
  clear: both;
}
.center {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50% ,-50%);

}
